﻿@model IEnumerable<HCM_maps_website.Models.PlaceModels>

@{
    ViewBag.Title = "ABC Map";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div id="page-wrap">
        <div id="header">
            <div id="logo-wrap">
                <h1><a class="context-menu-one box menu-1" id="logo" href="/">ABC Map</a></h1>
            </div>
            @Html.Partial("_SearchForm")
            <div id="toolbar"><span></span><span></span><span></span><span></span></div>         
        </div>
        <div id="body">
            <div id="sidebar">
                <ul id="tabs">
                    <li id="placeformtab" class="tab inactive"><a>Tìm vị trí</a></li>
                    <li id="streetformtab" class="tab inactive"><a>Tìm đường</a></li>
                    <li id="placearoundformtab" class="tab inactive"><a>Tìm xung quanh</a></li>
                </ul>
                <span id="border_home_hide"><a id="homeformtab" title="Trang chủ"></a><span id="but_hsidebar" title="Ẩn form"></span></span>
                <div id="tabs-content">
                    <div id="homeform" class="border-content visible">
                        <h1>Trang Chủ</h1>
                    </div>
                    <div id="streetform" class="border-content invisible"  style="display: none;">
                            <span class="border-input-button" id="startPoint">
                                <input type="text" value="Nhập vị trí bắt đầu"
                                onfocus="if(this.value=='Nhập vị trí bắt đầu') this.value='';" 
                                onblur="if(this.value=='') this.value='Nhập vị trí bắt đầu';"  />
                                <input type="button" class="button-inset" />
                            </span>
                            <div class="listplace placeresult" id="sp_result">
                                <ul class="street-content" style="display: none;">
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                            </ul>
                            <a href="#" class="hidebut_result" id="hbut_sp" title="Ẩn/Hiện danh sách kết quả">&#x25BC;</a>
                            </div>
                            <span class="border-input-button" id="endPoint">
                                <input type="text" value="Nhập vị trí kết thúc" 
                                onfocus="if(this.value=='Nhập vị trí kết thúc') this.value='';" 
                                onblur="if(this.value=='') this.value='Nhập vị trí kết thúc';"/>
                                <input type="button" class="button-inset" />
                            </span>
                            <div class="listplace placeresult" id="ep_result">
                                <ul class="street-content" style="display: none;">
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                            </ul>
                            <a href="#" class="hidebut_result" id="hbut_sp" title="Ẩn/Hiện danh sách kết quả">&#x25BC;</a>
                            </div>
                </div>
                    <div id="placeform" class="listplace border-content invisible"  style="display: none;">
                        <div id="placeform_replace"></div>
                        <ul class="street-content border-slider-content">
                            @if (Model != null)
                            {
                                foreach (HCM_maps_website.Models.PlaceModels place in Model)
                                {
                                    <li>
                                        <h5>@place.Name</h5>
                                        <a class="address">@place.Address</a>
                                        <span class="function">
                                            <a href="#" class="viewmap">Xem</a>
                                            <a href="#" class="setstartpoint">Điểm đi</a>
                                            <a href="#" class="setendpoint">Điểm đến</a>
                                            <a href="#" class="findplacearound">Xung quanh</a>
                                        </span>
                                    </li>
                                }
                            }
                        </ul>
                        <span class="top_seperate"></span>
                        <span class="bottom_seperate"></span>
                        <div id="slider_placeform" class="slider-content"><span></span></div>
                    </div>
                    <div id="placearoundform" class="border-content invisible" style="display: none;">
                        <div id="form_input">
                            <span id="placetype">
                                <label>Loại địa điểm</label>
                                <select id="lst_placetype">
                                    <option>Cà phê</option>
                                    <option>Nhà hàng</option>
                                    <option>Karaoke</option>
                                    <option>Khách sạn</option>
                                    <option>Trường học</option>
                                    <option>Quán ăn</option>
                                </select>
                            </span>
                            <span id="range">
                                <label>Bán kính</label>
                                <input id="num_range" type="text" />
                                <select id="lst_unit">
                                    <option>Km</option>
                                    <option>Mét</option>
                                </select>
                            </span>
                            <div class="clear-fix"></div>
                        </div>
                        <div class="listplace">
                            <ul  class="street-content border-slider-content">
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                                <li>
                                    <h5>Đại Học Khoa Học Tự Nhiên</h5>
                                    <a class="address">227 Nguyễn Văn Cừ F7 Q5 TP.HCM</a>
                                    <span class="function">
                                        <a href="#" class="viewmap">Xem</a>
                                        <a href="#" class="setstartpoint">Điểm đi</a>
                                        <a href="#" class="setendpoint">Điểm đi</a>
                                        <a href="#" class="findplacearound">Xung quanh</a>
                                    </span>
                                </li>
                            </ul>
                            
                            <span class="top_seperate"></span>
                            <span class="bottom_seperate"></span>
                            <div id="slider_placearoundform" class="slider-content"><span></span></div>
                        </div>
                    </div>
                </div>
                <div id="footer">
                        <a>&copy;2012 ABC Maps</a>
                        <a>-</a>
                        <a href="#">Trang chủ</a>
                        <a>-</a>
                        <a href="#">Hướng dẫn</a>
                        <a>-</a>
                        <a href="#">Về chúng tôi</a>
                        <a>-</a>
                        <a href="#">Góp ý</a>
                </div>
            </div>
            <span id="but_ssidebar" style="display: none;" title="Hiện form">&#x25BA;</span>
            <div id="content">
                <div id="map-container">
                    <canvas id="map-pic"></canvas>
                    @*<img alt="" id="map-pic" src="../../Content/images/map.png" class="ui-widget-content"/>*@
                    <span id="topbox"></span>
                    <span id="leftbox"></span>
                    <span class="indicatePlace_onMap" id="indicateA"><span></span></span>
                    <span class="indicatePlace_onMap" id="indicateB"><span></span></span>
                    <ul id="contextmenu_map">
                        <li class="mn_item0"><a href="#">Điểm xuất phát</a></li>
                        <li class="mn_item1"><a href="#">Điểm kết thúc</a></li>
                        <li class="mn_item2"><a href="#">Thông tin điểm</a></li>
                        <li class="mn_item3"><a>Tìm xung quanh</a></li>
                        <li class="mn_item4"><a>Toàn màn hình</a></li>
                        <li class="mn_item5"><a href="#">Chụp bản đồ</a></li>
                    </ul>
                </div>
                <div id="controlzoom">
                    <span id="pluszoom" class="butzoom">&#x002B;</span>
                    <span id="barzoom"></span>
                    <span id="indicatezoom">&#x2013;</span>
                    <span id="minuszoom" class="butzoom">&#x2013;</span>
                </div>
                <div id="controldirection">
                    <span id="movetop" class="butdir">&#x25B2;</span>
                    <span id="moveright" class="butdir">&#x25BA;</span>
                    <span id="movebottom" class="butdir">&#x25BC;</span>
                    <span id="moveleft" class="butdir">&#x25C4;</span>
                </div>
            </div>
        </div>
        <div class="clear-fix"></div>
    </div>
